<template>
  <!-- <div>
    仓库管理
  </div> -->
  <div>
    
    <el-form :inline="true" :model="warehouse" class="demo-form-inline">
      <el-form-item label="仓库名称" style="float: left; margin-left:0px;">
        <el-input v-model="warehouse.warehouseName" style="width:100%;" laceholder="审批人"></el-input>
      </el-form-item>
      <el-form-item style="float:left; margin-left:20px;">
        <el-button type="primary" @click="getPageList()">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <br/><br/><br/>
    
    <!-- 
      float:left;     标签左对齐
      clear:left;     清除任何浮动，左对齐
    -->
    <router-link to="/ware_save">
      <el-button type="primary" style="float:left; clear:left; width:60px; height:32px; padding:0px;">新增</el-button>
    </router-link>
    
    <el-table :data="initData">
    <el-table-column prop="warehouseName" label="仓库名称" width="200">
    </el-table-column>
    <el-table-column prop="status" label="状态" width="200">
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="200">
    </el-table-column>
    <el-table-column prop="updateTime" label="更新时间" width="200">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <!-- 删除 -->
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"> 
              删除
            </el-button>
            &nbsp;
            <!-- 编辑 -->
            <router-link :to="{
              name: 'ware_edit',
              path:'/ware_edit',
              params:{
                id:scope.row.id,
                warehouseName:scope.row.warehouseName
              }
            }">
              <el-button type="primary" size="mini" icon="el-icon-edit"> 
                编辑
              </el-button>
            </router-link>
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
    :current-page="pageNo"
    :page-size="pageSize"
    :total="total"
    style="padding: 30px 0; text-align: right;"
    layout="total, prev, pager, next, jumper"
    @current-change="getPageList"
    />
  </div>
</template>

<script>
import ware from '@/api/ware';
export default {
  name:'WarehouseList',
  data(){
    return {
      pageNo:1,
      pageSize:20,
      total:0,
      initData: [],
      warehouse:{
        warehouseName:''
      }
    }
  },
  methods:{
    initWareDetailData(){
      let warehouseDto = {
        pageNo:1,
        pageSize:this.pageSize,
        warehouseName:this.warehouse.warehouseName
      }
      ware.getWareHouseList(warehouseDto).then(
        response => {
          console.log('仓库列表响应数据：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == "200") {
            this.initData = response.data.data.data_list
            this.pageNo = response.data.data.page_no
            this.pageSize = response.data.data.page_size
            this.total = response.data.data.total
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('请求仓库列表异常，异常信息：', error)
        }
      )
    },
    getPageList(pageNo = 1){
      this.pageNo = pageNo
      let warehouseDto = {
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        warehouseName:this.warehouse.warehouseName
      }
      ware.getWareHouseList(warehouseDto).then(
        response => {
          console.log('仓库列表响应数据：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == "200") {
            this.initData = response.data.data.data_list
            this.pageNo = response.data.data.page_no
            this.pageSize = response.data.data.page_size
            this.total = response.data.data.total
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('请求仓库列表异常，异常信息：', error)
        }
      )
    },
    removeDataById(id){
      console.log('删除仓库id：', id)
      ware.removeWare(id).then(
        response => {
          console.log('删除仓库，响应信息：', response)
          let resData = response.data.data
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == '200' && resData){
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //删除成功，刷新页面
            location.reload()
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.log('删除仓库异常，异常信息：', error)
        }
      )
    }
  },
  beforeMount(){
    console.log('开始初始化仓库数据...')
    this.initWareDetailData()
  }
}
</script>

<style>

</style>